<template>
    <div class="app-container">
        <!-- 数据列表 -->
        <div class="list">
            <el-card>
                <div class="list-card">
                    <div class="data">
                        <el-icon :size="16">
                            <Tickets />
                        </el-icon>
                        <span>数据列表</span>
                    </div>
                    <el-button @click="addProdAttr">添加</el-button>
                </div>
            </el-card>
        </div>
        <!-- 属性列表 -->
        <div class="table">
            <el-table :data="productAttrList" style="width: 100%" @selection-change="hdSelectChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="id" label="编号" width="60px" />
                <el-table-column prop="name" label="属性名称" />
                <el-table-column label="商品类型">
                    <template #default>
                        {{ route.query.cname }}
                    </template>
                </el-table-column>
                <el-table-column prop="searchType" label="属性是否可选" />
                <el-table-column label="属性录入方式">
                    <template #default="{ row }">
                        {{ row.inputType == 0 ? '手工录入' : '从列表中选取' }}
                    </template>
                </el-table-column>
                <el-table-column label="可选值列表" prop="inputList">
                </el-table-column>
                <el-table-column label="排序" prop="sort">
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template #default="{ row }">
                        <el-button size="small" @click="editProdAttr(row.id)">编辑</el-button>
                        <el-button type="danger" size="small" @click="deleteProduct(row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 分页器 -->
        <div class="pagination">
            <el-pagination v-model:current-page="AttributeVal.pageNum" v-model:page-size="AttributeVal.pageSize"
                :page-sizes="[5, 10, 15]" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
        <!-- 批量删除 -->
        <el-select v-model="DeleteVal" class="m-2" placeholder="批量操作">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-button @click="deleteProdList" type="primary" style="margin-left: 20px;">确定</el-button>
    </div>
</template>

<script setup lang="ts">
import { Tickets } from '@element-plus/icons-vue'
import * as http from '@/request/http'
import { reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';

const route = useRoute()
const router = useRouter()

//批量删除参数
const DeleteVal = ref()
const options = [
    {
        label: '删除',
        value: 0
    }
]

//获取商品id
const ids = ref<number[]>([])
const hdSelectChange = (val: IProductAttrList[]) => {
    ids.value = val.map(item => item.id)
}
const getDelete = () => {
    ElMessageBox.confirm(
        '是否要删除该属性',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        http.productAttrList.productAttributeDelete(ids.value).then(res => {
            if (res.code == 200) {
                ElMessage.success('删除成功')
                getProdAttrList(AttributeVal.pageNum, AttributeVal.pageSize)
            }
        })
    })

}

//删除单个属性
const deleteProduct = (id: number) => {
    ids.value.push(id)
    ElMessageBox.confirm(
        '是否要删除该属性',
        '提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        getDelete()
    }).catch(() => {
        ids.value.shift()
    })
}
//属性列表

//批量删除
const deleteProdList = () => {
    if (ids.value.length == 0) {
        ElMessage.warning('请选择一条记录')
        return
    } else if (DeleteVal.value !== 0) {
        ElMessage.warning('请选择批量操作类型')
        return
    } else {
        getDelete()
    }
}
//跳转添加商品属性
const addProdAttr = () => {
    router.push(`addProductAttr?cid=${cid}&type=${type}`)
}
//跳转编辑商品属性
const editProdAttr = (id: number) => {
    router.push(`updateProductAttr?id=${id}`)
}

//获取属性分类列表路由携带参数
const cid = Number(route.query.cid)
const type = Number(route.query.type)
//属性分类总数
const total = ref(0)
//属性列表参数
const AttributeVal = reactive({
    pageSize: 5,
    pageNum: 1,
    type: type,
    cid: cid
})

const handleSizeChange = (val: number) => {
    getProdAttrList(AttributeVal.pageNum, val)
}
const handleCurrentChange = (val: number) => {
    getProdAttrList(val, AttributeVal.pageSize)
}
//属性列表数据处理
const productAttrList = ref<any>([])
const getProdAttrList = (pageNum: number, pageSize: number) => {
    http.productAttrList.productAttributeList({
        pageNum: pageNum,
        pageSize: pageSize,
        type: type,
        cid: cid
    }).then(res => {
        productAttrList.value = res.data.list
        total.value = res.data.total
        productAttrList.value.forEach((item: any) => {
            if (item.searchType == 0) {
                item.searchType = '唯一'
            } else if (item.searchType == 1) {
                item.searchType = '单选'
            } else {
                item.searchType = '多选'
            }
        })
    })
}
getProdAttrList(AttributeVal.pageNum, AttributeVal.pageSize)

</script>

<style scoped lang="less">
.list {
    margin-top: 30px;

    .list-card {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .data {
            display: flex;
            align-items: center;
            font-size: 14px;

            .el-icon {
                padding-right: 10px;
            }
        }
    }
}

:deep(.table) {
    margin-top: 20px;

    .el-table {
        border: 1px solid #ebeef5;

    }

    .el-table__cell {
        border-right: 1px solid #ebeef5;
        color: #909399;
        font-size: 13px;
    }

    th {
        color: #909399;
        font-size: 13px;
    }

    .cell {
        text-align: center;
    }
}

.pagination {
    width: 100%;
    margin-top: 20px;

    .el-pagination {
        float: right;
    }
}
</style>